<template>
  <div>
    <el-dialog title="列表配置"
               :visible.sync="visible"
               @close="dialogClose">
      <el-tabs v-model="activeTab">
        <el-tab-pane label="列表字段"
                     name="listParam">
          <el-table border
                    :header-cell-style="{ background: '#f5f5f5' }"
                    :data="editListConfig.show_obj_list">
            <el-table-column label="字段名称"
                             prop="show_obj_name"></el-table-column>
            <el-table-column label="列表显示">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.is_show"
                           active-value="1"
                           inactive-value="0"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <el-button :disabled="scope.$index===0"
                           @click="upItem(scope.row,scope.$index)"
                           type="text">上移</el-button>
                <el-button :disabled="scope.$index>=editListConfig.show_obj_list.length-1"
                           @click="downItem(scope.row,scope.$index)"
                           type="text">下移</el-button>
              </template>

            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="列表设置"
                     name="listConfig">
          <el-form :model="editListConfig.show_cfg"
                   label-width="100px">
            <el-form-item label="布局样式"
                          prop="show_type">
              <el-radio-group v-model="editListConfig.show_cfg.show_type">
                <el-radio label="1">卡片式</el-radio>
                <el-radio label="2">瀑布流</el-radio>
                <el-radio label="3">list列表</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="搜索条件">
              <el-select v-model="editListConfig.show_cfg.search_obj_id"
                         placeholder="请选择字段">
                <el-option v-for="(item) in editListConfig.show_obj_list"
                           :key="item.show_obj"
                           :label="item.show_obj_name"
                           :value="item.show_obj"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="排序字段">
              <el-select v-model="editListConfig.show_cfg.order_field"
                         placeholder="排序字段">
                <el-option v-for="item in orderItems"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value"></el-option>
              </el-select>
              <el-radio-group v-model="editListConfig.show_cfg.order_type">
                <el-radio label="desc">降序</el-radio>
                <el-radio label="asc">升序</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="对齐方式">
              <div class="align-icon">
                <i @click="toggleAlign('left')"
                   :class="{'active':editListConfig.show_cfg.align_type==='left'}"
                   class="fa fa-align-left"></i>
                <i @click="toggleAlign('center')"
                   :class="{'active':editListConfig.show_cfg.align_type==='center'}"
                   class="fa fa-align-justify"></i>
                <i @click="toggleAlign('right')"
                   :class="{'active':editListConfig.show_cfg.align_type==='right'}"
                   class="fa fa-align-right"></i>
              </div>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="confirm"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {


  data () {
    return {
      orderItems: [
        { label: '检查记录ID', value: 'check_record_id' },
        { label: '创建时间', value: 'created_at' },
        { label: '更新时间', value: 'updated_at' },
      ],
      activeTab: 'listParam',
      visible: false,
      editListConfig: {
        show_obj_list: [],
        show_cfg: {
          show_type: '1',
          search_obj_id: '',
          order_field: 'updated_at',
          order_type: 'desc',
          align_type: 'left'
        }
      },
      resetParam: {

        show_cfg: {
          show_type: '1',
          search_obj_id: '',
          order_field: 'updated_at',
          order_type: 'desc',
          align_type: 'left'
        }
      },
    };
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
    },
    dialogData: {
      handler (newval, oldval) {
        let reset = JSON.parse(JSON.stringify(this.resetParam))
        let data = JSON.parse(JSON.stringify(newval))
        if (Array.isArray(data.show_cfg)) {
          data.show_cfg = reset.show_cfg
        } else if (Object.keys(data.show_cfg) <= 0) {
          data.show_cfg = reset.show_cfg
        }
        this.editListConfig = Object.assign(reset, data)
        console.log(newval, this.editListConfig, reset, '222')
      },
      deep: true
    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },
    dialogData: {
      type: Object
    },
    callback: {
      type: Function
    }
  },
  methods: {
    confirm () {
      this.$emit('callback', this.editListConfig)
      this.dialogClose()
    },
    // 切换对齐方式
    toggleAlign (align) {
      this.$set(this.editListConfig.show_cfg, 'align_type', align)
      console.log(this.editListConfig, '57')
    },
    // 上移
    upItem (row, index) {
      this.editListConfig.show_obj_list.splice(index, 1)
      this.editListConfig.show_obj_list.splice(index - 1, 0, row)
    },
    // 下移
    downItem (row, index) {
      this.editListConfig.show_obj_list.splice(index, 1)
      this.editListConfig.show_obj_list.splice(index + 1, 0, row)
    },
    dialogClose () {
      this.$emit("update:dialogVisible", false);
    },
  },
  created () {

  },
  mounted () {

  },
};
</script>

<style scoped lang="scss">
.align-icon {
  color: #ccc;
  font-size: 15px;
  i {
    cursor: pointer;
  }
  .active {
    color: #1890ff;
  }
}
</style>
